<template>
  <div class="sceneDetails">
    <div class="sceneDetails_title">
      <div class="sceneDetails_title_content">
        <div class="title">项目名称</div>
        <div class="name">{{ name }}</div>
      </div>
      <div class="sceneDetails_title_content">
        <div class="title">项目建设进度</div>
        <div class="name" style="height:calc(10vh);position:relative;top:-10px">
          <div>
            <img style="width:25px;position: relative;left: 20px;" src="../../assets/images/mapper/position3.png">
            <!-- <span style="font-size:13px">50%</span> -->
          </div>
          <div>
            <span style="background:#5470c6" class="signSpan">申报</span>
            <span style="background:#91cc75" class="signSpan">核准</span>
            <span style="background:#fac858" class="signSpan">建设</span>
            <span style="background:#ee6766" class="signSpan">完成</span>

          </div>
        </div>
      </div>
      <div class="sceneDetails_title_content1">
        <div class="title">项目费用</div>
        <div class="name">200 万元</div>
      </div>
      <div class="sceneDetails_title_content1">
        <div class="title">成果展示</div>
        <div class="name">具体详情</div>
      </div>
    </div>
    <div class="sceneDetails_body">
      <el-collapse v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="三张清单" name="1">
          <div style="padding:10px;height:calc(60vh);overflow-y:auto">
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">重大需求 </span>
            </div>
            <div style="margin-top:5px">
              <table>
                <tr>
                  <td>需求名称</td>
                  <td>{{ name }}</td>
                  <td>需求类型</td>
                  <td>防范化解重大风险隐患的需求</td>
                </tr>
                <tr>
                  <td>需求内容</td>
                  <td :colspan="3">
                    <div style="text-align:left;line-height:20px">
                      习近平总书记强调，安全是发展的前提，发展是安全的保障。危化品安全是事关发展与安全的重大问题。我省是化工大省,保障
                      危 化品安全责任重大。危化品行业安全隐患突出，存在主要问题:</br>
                      1.危化品种数量多、工艺条件复杂、危险作业频率大，涉及多各业，存在不少安全风险“想不到、看不到、管不到”的问题;</br>
                      2.部分危化品单位主体履责意识薄弱，履责能力不足，风险隐患发现不及时、整改不到位的问题较为普遍;</br>
                      3.危化品各环节监管"单打独斗”、"各自为战;没有形成工作合力，甚至“监管打架”;</br>
                      4.部门监管信息不互通，互为“数据孤岛二无法通过数据碰撞发现风险隐患</br>
                    </div>
                  </td>
                </tr>

              </table>

            </div>
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">多跨场景应用 </span>
            </div>
            <div style="margin-top:5px">
              <table>
                <tr>
                  <td>应用名称</td>
                  <td>危险化学品短期安全管控</td>
                  <td :rowspan="2" style="width:350px">小切口子场景</td>
                  <td :rowspan="2">
                    <div style="text-align:left">
                      1.化工设备全周期管理;</br>
                      2.危化品道路运输监管;</br>
                      3.部门联动应急救援;</br>
                      4.危化品槽握车洗消“T犍”场景;</br>
                      5.从业人员安全培训管理。</br>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>谋划基础</td>
                  <td>
                    <div>
                      1应急管理厅:企业安全生产风险智控(迭代升
                      级“企业安全生产风险防控和应急救援协同应用”);
                      绍兴上虞区:危化品全生命周期智慧监管应用
                    </div>
                  </td>

                </tr>
                <tr>
                  <td>项目类型</td>
                  <td>迭代升级</td>
                  <td :rowspan="2" style="width:350px">基本框架</td>
                  <td :rowspan="2">
                    <div style="text-align:left">
                      以有效防范危化品生产安全事故为目标，聚焦危化 品安全风险7大要素，贯通生产、使用、运输、储 存、废弃处置等5大环节，打造危化品全链条智能化 管理闭环。
                      1.风险智能监测;</br>
                      2.异常实时预警;</br>
                      3.向瓦闭环近置;</br>
                      4.部门联动高效救援;</br>
                      5.科学评价和精准监督;</br>
                      6.从业人员安全培训管理。</br>
                    </div>
                  </td>

                </tr>
                <tr>
                  <td>责任单位</td>
                  <td>
                    <div>
                      省应急管理厅牵头，省经信厅、省交通运输厅、省
                      公安厅、省市场监管局、省生态环境厅、省消防总
                      队等
                    </div>
                  </td>

                </tr>

              </table>
            </div>
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">重大改革 </span>
            </div>
            <div style="margin-top:5px">
              <table>
                <tr>
                  <td style="width:200px">改革项目</td>
                  <td>危险化学品短期安全管控</td>
                </tr>
                <tr>
                  <td style="width:200px">改革任务</td>
                  <td style="text-align:left">
                    1.雌窥/</br>
                    2.体制机制创新:研究调整相关应急处突职能机构; </br>
                    3.政策制度鳏:研究制订全省f化智能化应急处突快速响应实施方装</br>
                    4.业务流程重塑:系统重构突发事件信息汇聚、性质研判、任务触发、指挥处置体系。 例据开放安全</br>
                  </td>
                </tr>
              </table>
            </div>

          </div>
        </el-collapse-item>
        <el-collapse-item title="场景建设" name="2">
          <div style="padding:10px;height:calc(60vh);overflow-y:auto">
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">项目评亩 </span>
            </div>
            <div style="margin-top:5px">
              <table>
                <tr>
                  <td style="width:200px">项目名称</td>
                  <td style="background:#e4e3e3">...项目</td>
                  <td style="width:200px">建设单位</td>
                  <td style="background:#e4e3e3">绍兴市改革办</td>
                </tr>
                <tr>
                  <td style="width:200px">申报时间</td>
                  <td style="background:#e4e3e3">2021-5-21</td>
                  <td style="width:200px">申报资金</td>
                  <td style="background:#e4e3e3">600万元</td>
                </tr>
                <tr>
                  <td style="width:200px">是否立项</td>
                  <td>是</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">评亩时间</td>
                  <td>是</td>
                  <td style="width:200px">是否立项</td>
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">核准资金</td>
                  <td>1000万元</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">专家意见</td>
                  <td>暂无</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">附件</td>
                  <td>暂无</td>
                  <td style="width:200px" />
                  <td />
                </tr>
              </table>
            </div>
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">项目采购 </span>
            </div>
            <div style="margin-top:5px">
              <table>
                <tr>
                  <td style="width:200px">项目名称</td>
                  <td style="background:#e4e3e3">...项目</td>
                  <td style="width:200px">建设单位</td>
                  <td style="background:#e4e3e3">绍兴市改革办</td>
                </tr>
                <tr>
                  <td style="width:200px">申报时间</td>
                  <td style="background:#e4e3e3">2021-5-21</td>
                  <td style="width:200px">申报资金</td>
                  <td style="background:#e4e3e3">600万元</td>
                </tr>
                <tr>
                  <td style="width:200px">是否启动采购</td>
                  <td>是</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">采购方式</td>
                  <td>自购</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">采购时间</td>
                  <td>2021-10-23</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">是否完成采购</td>
                  <td>暂无</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">完成时间</td>
                  <td>暂无</td>
                  <td style="width:200px">采购结果地址</td>
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">中标单位</td>
                  <td>暂无</td>
                  <td style="width:200px">中标金额</td>
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">是否签订合同</td>
                  <td>暂无</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">建设单位</td>
                  <td>暂无</td>
                  <td style="width:200px">合同金额</td>
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">项目工期</td>
                  <td>暂无</td>
                  <td style="width:200px" />
                  <td />
                </tr>
                <tr>
                  <td style="width:200px">开工时间</td>
                  <td>暂无</td>
                  <td style="width:200px">完工时间</td>
                  <td />
                </tr>
              </table>
            </div>
            <div class="tips">
              <span class="circle" />
              <span style="padding: 5px;font-size: 16px;">项目建设 </span>
              <div style="margin-top:5px">
                <table>
                  <tr>
                    <td style="width:200px">项目名称</td>
                    <td style="background:#e4e3e3">...项目</td>
                    <td style="width:200px">建设单位</td>
                    <td style="background:#e4e3e3">绍兴市改革办</td>
                  </tr>
                  <tr>
                    <td style="width:200px">申报时间</td>
                    <td style="background:#e4e3e3">2021-5-21</td>
                    <td style="width:200px">申报资金</td>
                    <td style="background:#e4e3e3">600万元</td>
                  </tr>
                  <tr>
                    <td style="width:200px">项目建设计划表</td>
                    <td>查看</td>
                    <td style="width:200px">项目进度</td>
                    <td />
                  </tr>
                  <tr>
                    <td style="width:200px">每月报送</td>
                    <td>查看</td>
                    <td style="width:200px">往期报送</td>
                    <td />
                  </tr>
                  <tr>
                    <td style="width:200px">监理日志</td>
                    <td>查看</td>
                    <td style="width:200px">往期日志</td>
                    <td>往期日志</td>
                  </tr>
                </table>
              </div>
            </div>

          </div>
        </el-collapse-item>
        <el-collapse-item title="场景展示" name="3">

          <div style="text-align:center;padding:10px;height:calc(60vh);overflow-y:auto">
            <img style="width:50%;margin-bottom:10px" src="../../assets/images/mapTest1/show.jpeg">
            <img style="width:50%;margin-bottom:10px" src="../../assets/images/mapTest1/show1.jpeg">
            <img style="width:50%;margin-bottom:10px" src="../../assets/images/mapTest1/show2.webp">
            <img style="width:50%;margin-bottom:10px" src="../../assets/images/mapTest1/show3.webp">
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>

  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
// 引入echart 需要这样去写
import * as echarts from 'echarts';
var value = 0.54;
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      name: '浙里危险化学品全周期管理‘一件事’应用场景',
      topConfig: {

      },
      activeNames: ['1']
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped lang='scss'>
  td {
      border: 1px solid #4c4a4a;
      color: #4c4a4a;
      text-align: center;
      height: calc(6vh);
      line-height: 18px;
      padding: 10px;
      width: 1000px;
      font-size:14px;
      font-weight: bolder
    }

    table {
        border-collapse: collapse;
    }
  .sceneDetails{
    padding:20px
  }
  .sceneDetails_title{
    display: flex;
    height: calc(18vh);
  }
  .sceneDetails_title_content{
    flex:2;
    margin:0px 5px;
    background: url('../../assets/images/mapTest1/detailBg.png') no-repeat;
    background-size:100% 100%;
    padding:10px
  }
  .sceneDetails_title_content:hover{

    cursor: pointer;
  }
  .sceneDetails_title_content1:hover{

    cursor: pointer;
  }
  .sceneDetails_title_content1{
    flex:1;
    margin:0px 5px;
    padding:10px;
    background: url('../../assets/images/mapTest1/detailBg.png') no-repeat;
    background-size:100% 100%;
  }
  .title{
      text-align: center;
      font-size: 18px;
      font-weight: bolder;
      padding:10px;
      margin-top: 10px;
    }
    .name{
      text-align: center;
      font-size: 16px;
      margin-top:10px;
    }
    .name:hover{
      cursor: pointer;
      text-decoration: underline
    }
    .sceneDetails_body{
      margin-right: 10px;
      padding:15px 0px 15px 15px

    }
   .sceneDetails_body /deep/ .el-collapse-item__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    color: black;
    cursor: pointer;
    border-bottom: 1px solid #e6ebf5;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: none;
    font-size: 18px;
    padding-left: 12px;

}
.circle{
      display: inline-block;
    width: 10px;
    height: 10px;
    background: #1692ff;
    border-radius: 50%;
}
.tips{
  margin-top:10px
}
.signSpan{
   width: 65px;
    height: 25px;
    display: inline-block;
    /* border: 1px solid black; */
    text-align: center;
    line-height: 25px;
    margin: -3px;
    padding: 0px;
    color:#fff;
    font-size: 12px
}

</style>
